<template>
  <layout>
    <template #header>
      <view class="header flex flex-a-c">
        <text class="title bold">数据统览</text>
        <view @click="onShowFilter" class="filter flex flex-a-c">
          <text class="c-60 fs-24">筛选</text>
          <image
            src="../../assets/images/icons/filter.png"
            style="width: 48rpx; height: 48rpx; margin-left: 16rpx"
            mode="scaleToFill"
          />
        </view>
      </view>
      <u-tabs
        class="tabs"
        :lineWidth="30"
        :lineHeight="4"
        :list="list2"
        :activeStyle="{
          color: '#436AF3',
          fontWeight: 'bold',
          fontSize: '32rpx',
        }"
        :inactiveStyle="{
          color: '#070B1C',
          fontSize: '32rpx',
        }"
        :lineColor="'#436AF3'"
      ></u-tabs>
    </template>
    <view class="list">
      <scroll-view class="scroll-box" scroll-y @scrolltolower="onScroll">
        <view class="list-box" v-if="list.length">
          <view class="item" v-for="i in 15" :key="i">
            <view class="top flex flex-bt">
              <view class="flex flex-a">
                <u-icon
                  v-if="i % 2 == 0"
                  name="order"
                  size="24"
                  color="#F65900"
                ></u-icon>
                <u-icon v-else name="volume" size="24" color="#FFBC42"></u-icon>
                <text class="type fs-28">{{
                  i % 2 == 0 ? "订单收益" : "广告收益"
                }}</text>
              </view>
              <text class="income bold">￥1230.55</text>
            </view>
            <view class="bottom">
              总充值<text class="m">￥1231233.22</text>
            </view>
          </view>
        </view>
        <Empty :pic="require('../../assets/images/empty/normal-1.png')" v-else>
          <template v-if="!userInfo.userId" #extra>
            <view
              style="height: 80rpx; width: 224rpx; margin-top: 40rpx"
              class="active-btn"
              @click="toLogin"
            >
              去登录
            </view>
          </template>
        </Empty>
      </scroll-view>
    </view>
    <u-popup :show="showFilter" @close="close" @open="open">
      <view class="filter-content">
        <view class="title">
          <text class="fs-36 bold black">全部筛选</text>
          <u-icon class="close" name="close" @click="close"></u-icon>
        </view>
        <view class="f-item" v-for="(filter, index) in filters" :key="index">
          <text class="f-title fs-32 dark-text bold">{{ filter.title }}</text>
          <view class="flex flex-a">
            <text
              v-for="(type, i) in filter.types"
              :key="i"
              class="f-type"
              :class="[type.id == filtersSelected[index] ? 'active' : '']"
              @click="onFilterType(index, type)"
            >
              {{ type.name }}
            </text>
          </view>
        </view>
        <view class="btns flex">
          <text @click="onReset" class="btn default-btn">重置</text>
          <text @click="onConfirm" class="btn active-btn">确定</text>
        </view>
      </view>
    </u-popup>
  </layout>
</template>

<script>
import layout from "../../compennts/layout/index.vue";
import Empty from "../../compennts/empty/index.vue";
import { getLocalUserInfo } from "../../assets/utils";
export default {
  components: {
    layout,
    Empty,
  },
  data() {
    return {
      userInfo:{},
      list2: [
        {
          name: "关注",
        },
        {
          name: "推荐",
        },
        {
          name: "电影",
        },
        {
          name: "科技",
        },
        {
          name: "音乐",
        },
        {
          name: "美食",
        },
        {
          name: "文化",
        },
        {
          name: "财经",
        },
        {
          name: "手工",
        },
      ],
      list: [],
      showFilter: false,
      filtersSelected: [1, 1],
      filters: [
        {
          title: "投稿渠道",
          types: [
            {
              name: "全部",
              id: 1,
            },
            {
              name: "抖音",
              id: 2,
            },
            {
              name: "快手",
              id: 3,
            },
            {
              name: "微信",
              id: 4,
            },
          ],
        },
        {
          title: "结算方式",
          types: [
            {
              name: "全部",
              id: 1,
            },
            {
              name: "充值",
              id: 2,
            },
            {
              name: "星图",
              id: 3,
            },
            {
              name: "聚星",
              id: 4,
            },
          ],
        },
      ],
    };
  },
  onShow(){
    this.userInfo = getLocalUserInfo()
  },
  computed: {},
  methods: {
    click(e) {
      console.log(e);
    },
    toLogin(){
      uni.navigateTo({
        url:'/pages/login/index' 
      })
    },
    close() {
      this.showFilter = false;
      setTimeout(() => {
        uni.showTabBar();
      }, 400);
    },
    open() {},
    onShowFilter() {
      uni.hideTabBar();
      this.showFilter = true;
    },
    onFilterType(idx, item) {
      console.log(idx, item);
      this.filtersSelected[idx] = item.id;
      this.$set(this.filtersSelected, idx, item.id);
    },
    onReset() {
      this.filtersSelected = [1, 1];
    },
    onConfirm() {},
    onScroll() {
      console.log("bottom");
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/styles/common.less");
.header {
  position: relative;
  padding: 0 26rpx;
  .title {
    font-size: 36rpx;
    color: #070b1c;
  }
  .filter {
    position: absolute;
    right: 26rpx;
  }
}
.tabs {
  padding: 0 26rpx;
  margin-left: -26rpx;
  margin-bottom: 24rpx;
}
.list {
  padding: 0 26rpx;
  flex: 1;
  height: 100%;
  .scroll-box {
    height: 100%;
  }
  .list-box {
    padding-bottom: 1rpx;
  }
}
.item {
  background: #fff;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
  padding: 36rpx 32rpx;
  .type {
    color: rgba(7, 11, 28, 0.6);
    margin-left: 12rpx;
  }
  .income {
    color: #070b1c;
    font-size: 28rpx;
  }
  .bottom {
    color: rgba(7, 11, 28, 0.4);
    font-size: 24rpx;
    margin-top: 8rpx;
    .m {
      color: rgba(7, 11, 28, 0.8);
      margin-left: 8rpx;
    }
  }
}
.filter-content {
  padding: 48rpx 0;
  box-sizing: border-box;
  .title {
    padding: 0 48rpx;
    text-align: center;
    position: relative;
    line-height: 36rpx;
    .close {
      position: absolute;
      right: 48rpx;
      top: 0;
      font-size: 48rpx;
    }
  }
  .f-item {
    padding: 0 48rpx;
    margin-top: 48rpx;
    .f-title {
      color: rgba(7, 11, 28, 0.8);
    }
    .f-type {
      flex: 1;
      margin-right: 16rpx;
      padding: 8rpx;
      border-radius: 8rpx;
      border: 2rpx solid #f5f7fe;
      background: #f5f7fe;
      text-align: center;
      color: rgba(7, 11, 28, 0.6);
      margin-top: 24rpx;
      &:nth-last-child(1) {
        margin-right: 0;
      }
      &.active {
        color: #436af3;
        border-color: #436af3;
      }
    }
  }
  .btns {
    padding: 24rpx 48rpx 0 48rpx;
    margin-top: 28rpx;
    border-top: 2rpx solid #e9e9ea;
    .btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      &:nth-child(1) {
        margin-right: 22rpx;
      }
    }
  }
}
</style>
